<template>
<div>
  <jm-head ref="head"></jm-head>
    <van-search v-model="value" placeholder="请输入微信号/手机进行搜索"
      @search="onSearch"
    />
    <div class="manage box">
        <div  class="manage_list box" v-if="active != 0">
            <van-list
              v-model="loading"
              :finished="finished"
              :offset="1"
              finished-text="没有更多了"
              @load="getList"
            >
                <div class="block" v-for="(item,index) in list" :key = "index">
                    <div class="block_left">
                        <img :src="item.avatar" alt="头像">
                        <!-- <p>{{item.level - $store.state.userInfo.level}}代</p> -->
                    </div>
                    <div class="block_info">
                        <h3 class="ellipsis">{{item.nickname}}({{item.id}})</h3>
                        <div class="time">{{item.created_at}}</div>
                    </div>
                    <!-- <div class="block_right">
                        <van-button type="danger"  @click= "contentIt(item.id)">联系他</van-button>
                    </div> -->

                </div>
            </van-list>
        </div>
        <van-overlay :show="showModle" @click = "closeShow" >
            <div class="wrapper_1">
                <div class="block_1 box">
                    <div class="block_div" v-if="phone!==''">
                        手机号：{{phone}}
                        <span @click="copyNum(phone)">复制</span>
                    </div>
                    <div class="block_div" v-if="weixin!==''">
                        微信号：{{weixin}}
                        <span @click="copyNum(weixin)">复制</span>
                    </div>
                </div>
            </div>
        </van-overlay>

    </div>
</div>
</template>

<script>
    import Vue from 'vue';
    import { Toast,Search,List,Overlay } from 'vant'
    import { getList } from "@/api/fans";
    import { copy } from '@/utils/copy'
    import JmHead from '../head/head'

    Vue.use(Search).use(List).use(Overlay)
    export default {
        name: 'manage',
        components: {
            JmHead
        },
        data(){
            return {
                list: [],
                page: 1,
                active: 0,
                loading: false,
                finished: false,
                value: '',
                showModle: false,
                phone: '',
                weixin: '',
            }
        },
        methods: {
            getList() {
                getList({word: this.value, page: this.page}).then(res => {
                    this.list = this.list.concat(res.data.data)
                    this.page++
                    this.loading = false
                    if (this.page > res.data.last_page) {
                        this.finished = true
                    }
                })
            },
            goDetail(id) {
                this.$router.push({path: '/fans/detail', query: {id}})
            },
            closeShow(){
                this.showModle = false;
            },
            contentIt(id){
                const that = this
                this.list.filter(res => {
                    if (res.id === id) {
                        that.phone= res.phone
                        that.weixin = res.weixin
                    }
                })
                if(this.weixin === '' && this.phone === '') {
                    Toast.fail({message: '暂无联系方式', duration: 2000})
                    return
                }
                this.showModle = true;
            },
            copyNum(data){
                copy(data)
                Toast.success({message: '复制成功', duration: 2000})
            },
            onSearch() {
                this.init()
            },
            init() {
                this.list = []
                this.active = 0
                this.page = 1
                this.finished = false
                const _this = this
                setTimeout(function(){
                  _this.active = 1
                }, 100)
            }
        },
        activated: function () {
            this.value = ''
            this.init()

            this.$refs.head.setNavBarUrl()
        }
    }
</script>
<style lang="stylus" scoped>

    .manage
        background #ffffff
        padding 0 .3rem
        height 100%
        .manage_input
            width 100%
            overflow hidden
            margin .3rem auto
            background #f5f5f5
            padding-left .2rem
            line-height .7rem
            height .7rem
            border-radius 4px
            border 1px solid #eee
            input
                width 90%
                border none
                text-align left
                padding 0 .1rem
                display inline-block
                line-height .7rem
                font-size .28rem
                background #f5f5f5
                &::-webkit-input-placeholder
                    color #aab2bd
                    font-size .28rem
                    text-align left
        .manage_check
            width 100%
            overflow hidden
            line-height .4rem
            padding-bottom .3rem
            border-bottom 1px solid #eee
            .all_div
                margin-right .3rem
                font-size .24rem
                overflow hidden
            .fr
                padding-right .3rem
            .input_label
                cursor pointer
                position relative
                width 0.25rem
                height 0.25rem
                display inline-block
                border-radius 50%
                background #fff
                border 1px solid #ccc
                float left
                margin-top .04rem
                margin-right .1rem
            .active
                background gold
                border 1px solid gold
        .manage_list
            width 100%
            overflow hidden
            .block
                width 100%
                overflow hidden
                padding .3rem 0
                border-bottom 1px solid #eee
                display flex
                display -webkit-flex
                .block_left
                    width 1rem
                    height 1.2rem
                    overflow hidden
                    position relative
                    margin-right .3rem
                    img
                        width 100%
                        height 1rem
                        border-radius 50%
                        position absolute
                        top 0
                        left 0
                        z-index 1
                    p
                        width 100%
                        text-align center
                        line-height .36rem
                        color #ffffff
                        background #d64532
                        border-radius .3rem
                        position absolute
                        bottom 0
                        left 0
                        font-size .24rem
                        z-index 11
                .block_info
                    flex 1
                    -webkit-flex 1
                    overflow hidden
                    h3
                        width 100%
                        line-height .4rem
                        font-size .30rem
                        color #323233
                        margin-top: .1rem
                    .time
                        line-height .4rem
                        font-size .26rem
                        margin-top: .23rem
                        color #9b9b9b

                .block_right
                    overflow hidden
                    line-height: 1.2rem

                    button
                        height: .6rem
                        border-radius 4px
                        text-align center
                        border 1px solid #d64532
                        color #d64532
                        background #fff
                        font-size .26rem
                        display inline-block
                    .fr
                        border 1px solid  #d68100
                        color #fff
                        background #d68100
        .van-overlay
            z-index: 111

            .wrapper_1
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                .block_1
                    width: 5rem;
                    padding .3rem;
                    background-color: #fff
                    overflow hidden
                    border-radius .1rem
                    .block_div
                        width 100%
                        line-height: .8rem
                        color #000
                        font-size .28rem
                        overflow hidden
                        span
                            float right
                            border 1px solid #d64532
                            color #d64532
                            padding 0 .2rem
                            border-radius 6px
                            height .4rem
                            line-height .4rem
                            margin-top .2rem
                            font-size .26rem


</style>
